<template>
  <div
    class="app-container"
    style="background-color: #ffffff;
    width: 92%;
    border-radius: 5px;
    height: 95%;
    margin: 20px auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;"
  >
    <div style="background-color: rgba(249, 249, 249, 1);width: 100%;height: 60px;">
      <span
        style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;font-style: normal;font-size: 16px;text-align: left;line-height: 20px;position: absolute;margin: 20px;"
      >时序通道管理</span>
      <!--      <el-button-->
      <!--        style="margin: 16px;float: right;height: 35px;"-->
      <!--        type="primary"-->
      <!--        icon="el-icon-circle-plus-outline"-->
      <!--        size="mini"-->
      <!--        @click="handleAdd"-->
      <!--      >新增法庭摄像头</el-button>-->
    </div>
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
      <el-form-item label="" prop="tribunalName">
        <el-select v-model="queryParams.courtCode" :disabled="disabled" filterable placeholder="请选择法院" @change="selectTribunalByCourtCode">
          <el-option
            v-for="item in options"
            :key="item.courtCode"
            :label="item.courtName"
            :value="item.courtCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="tribunalName">
        <el-select v-model="queryParams.tribunalCode" :disabled="false" clearable filterable placeholder="请选择法庭" @change="getList">
          <el-option
            v-for="item in TribunalOptions"
            :key="item.tribunalCode"
            :label="item.tribunalName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="powerEquipmentName">
        <el-select v-model="queryParams.powerId" :disabled="false" clearable filterable placeholder="请选择时序器" @change="getList">
          <el-option
            v-for="item in powerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="powerConfigList.length== 0" class="no-channel-content">
      <div class="no-channel-content-inner">
        没有时序器通道
      </div>
    </div>
    <div v-else>
      <el-table v-loading="loading" :data="powerConfigList" :default-sort="defaultSort" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column v-if="false" label="id" align="center" prop="id" sortable="custom" :sort-orders="['descending', 'ascending']" />
        <el-table-column label="通道序号" align="center" prop="name" />
        <el-table-column label="设备名称" align="center" prop="equipmentName">
          <template slot-scope="scope">
            <div v-if="scope.row.channelInfoId == '0'">
              未配置
            </div>
            <div v-else>
              {{ scope.row.channelInfo.equipmentName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleConfig(scope.row)"
            >配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改法庭信息 -->
    <el-dialog :title="title" :visible.sync="showConfigForm" width="900px" append-to-body>
      <el-form ref="form" :model="channelForm" :rules="rules" label-width="120px">
        <!--        <el-form-item label="通道名称" prop="name">-->
        <!--          <el-input v-model="channelForm.name" placeholder="请输入完整的电脑名称" />-->
        <!--        </el-form-item>-->
        <el-form-item label="通道名称" prop="channelIndex">
          <el-select v-model="channelForm.channelIndex" :disabled="true" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in powerConfigList"
              :key="item.sort"
              :label="item.name"
              :value="item.sort"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称" prop="equipment">
          <el-select v-model="channelForm.equipmentId" :disabled="false" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in equipmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="channelForm.equipmentId==5008" label="设备名称" prop="brand">
          <el-input v-model="channelForm.equipmentName" placeholder="请输入设备名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savePowerConfig">保 存</el-button>
        <el-button @click="cancelPowerConfig">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectTribunalByCourtCode } from '@/api/tribunal'
import { selectTribunalCameraList, updateTribunalCamera, addTribunalCamera, deleteTribunalCamera } from '@/api/tribunalCamera'
import { listCourt } from '@/api/court'
import { getAllTypeTribunalEquipmentList, selectTribunalEquipmentListByType } from '@/api/tribunalEquipment'
import { getPowerChannelsInfo, savePowerChannelInfo } from '@/api/powerConfig'
export default {
  name: 'PowerChannelInfo',
  data() {
    return {
      disabled: false,
      codeNum: '',
      equipmentList: [],
      configChannel: null,
      channelForm: {
        channelIndex: 1,
        equipmentId: null,
        channelInfoId: 0,
        equipmentName: ''
      },
      showConfigForm: false,
      // 遮罩层
      loading: true,
      loading2: true,
      powerConfigList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 案件表格数据
      trialList: [],
      burnList: [],
      // 弹出层标题
      title: '',
      title2: '',
      // 是否显示弹出层
      open: false,
      open2: false,
      // 默认排序
      defaultSort: { prop: 'caseName', order: 'ascending' },
      judge: [],
      secretary: [],
      courtCode: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        powerId: null,
        courtCode: null,
        tribunalName: null,
        caseName: null,
        number: null,
        type: null,
        action: null,
        dept: null,
        party: null,
        chiefJudger: null,
        undertakerNumber: null,
        judge: '',
        judgeNumber: null,
        beginTime: null,
        clerkName: '',
        clerkNumber: null,
        tribunalCode: null,
        isDel: null
      },
      // 表单参数
      form2: {},
      // 表单参数
      form: {},
      options: [],
      TribunalOptions: [],
      powerOptions: [],
      // 表单校验
      rules: {
        caseName: [
          { required: true, message: '案号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCourtList()
  },
  methods: {
    cancelPowerConfig() {
      this.showConfigForm = false
      this.resetChannelForm()
    },
    savePowerConfig() {
      this.channelForm.powerId = this.queryParams.powerId
      savePowerChannelInfo(this.channelForm).then(res => {
        const success = res.success
        if (success) {
          this.showConfigForm = false
          this.resetChannelForm()
          this.getPowerChannelInfo()
        }
      })
    },
    resetChannelForm() {
      this.channelForm = {
        channelIndex: 1,
        equipmentId: null,
        channelInfoId: 0,
        equipmentName: ''
      }
    },
    getEquipmentsByTribunalCode() {
      const data = {
        tribunalCode: this.queryParams.tribunalCode
      }
      getAllTypeTribunalEquipmentList(data).then(response => {
        console.log(response)
        const success = response.success
        if (success) {
          const equipmentList = response.data
          equipmentList.push({ id: 5008, name: '其它' })
          this.equipmentList = equipmentList
        } else {
          this.equipmentList = []
          this.$message.error(response.msg)
        }
      })
    },
    // 根据法院代码查询法庭信息
    selectTribunalByCourtCode() {
      selectTribunalByCourtCode(this.queryParams.courtCode).then(response => {
        this.TribunalOptions = response.data
        if (this.TribunalOptions != null && this.TribunalOptions.length > 0) {
          this.queryParams.tribunalCode = this.TribunalOptions[0].id
          this.getPowerEquipmentsByTribunalCode()
        } else {
          this.powerOptions = []
          this.queryParams.tribunalCode = null
          this.TribunalOptions = null
        }
        // this.getList()
      })
    },
    // 根据法庭id查询时序电源
    getPowerEquipmentsByTribunalCode() {
      this.queryParams.type = 'power'
      selectTribunalEquipmentListByType(this.queryParams).then(response => {
        console.log(response)
        if (response.success) {
          this.powerOptions = response.data
          if (this.powerOptions.length > 0) {
            this.queryParams.powerId = this.powerOptions[0].id
            this.getPowerChannelInfo()
          }
        }
      })
    },
    getPowerChannelInfo() {
      getPowerChannelsInfo(this.queryParams).then(response => {
        console.log(response)
        const success = response.success
        if (success) {
          const powerConfigList = response.data.powerConfigList
          const powerChannelInfoList = response.data.powerChannelInfoList
          const powerChannelDict = []
          if (powerChannelInfoList.length > 0) {
            for (let i = 0; i < powerChannelInfoList.length; i++) {
              powerChannelDict[powerChannelInfoList[i].channelIndex] = powerChannelInfoList[i]
            }
          }
          for (let i = 0; i < powerConfigList.length; i++) {
            const index = powerConfigList[i].sort
            if (powerChannelDict[index] !== undefined) {
              powerConfigList[i].channelInfoId = powerChannelDict[index].id
              powerConfigList[i].channelInfo = powerChannelDict[index]
            } else {
              powerConfigList[i].channelInfoId = 0
            }
          }
          this.powerConfigList = powerConfigList
          console.log(powerConfigList)
        } else {
          this.$message.error(response.msg)
          this.powerConfigList = []
        }
      })
    },
    /** 查询法院列表 */
    getCourtList() {
      listCourt().then(response => {
        this.options = response.data.clist
        this.queryParams.courtCode = response.data.courtCode
        if (this.options.length <= 1) {
          this.disabled = true
        }
        this.selectTribunalByCourtCode()
        this.getList()
      })
    },

    // 排序
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order
      this.getList()
    },
    /** 查询法庭列表 */
    getList() {
      this.loading = true
      selectTribunalCameraList(this.queryParams).then(response => {
        this.trialList = response.data.tcList.records
        this.total = response.data.tcList.total
        this.loading = false
      })
    },
    handleConfig(row) {
      this.configChannel = row
      this.showConfigForm = true
      this.channelForm.channelIndex = row.sort
      // channelInfoId == 0 原先没有配置 row.channelInfoId !== 0 原先有配置
      if (row.channelInfoId !== 0) {
        this.channelForm.equipmentId = row.channelInfo.equipmentId
        this.channelForm.equipmentName = row.channelInfo.equipmentName
      } else {
        this.channelForm.equipmentId = 5008
      }
      this.getEquipmentsByTribunalCode()
    },
    // 删除
    handleDelete(row) {
      deleteTribunalCamera(row).then(response => {
        this.$message({ message: '删除成功', type: 'success' })
        this.getList()
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    cancel2() {
      this.open2 = false
      this.reset()
      this.burnList = []
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        courtCode: null,
        caseName: null,
        trialNum: null,
        tribunalName: null,
        tribunalCode: null,
        number: null,
        type: null,
        action: null,
        dept: null,
        party: null,
        undertaker: null,
        undertakerNumber: null,
        judge: null,
        judgeNumber: null,
        clerk: null,
        clerkNumber: null,
        createBy: null,
        updateBy: null,
        createTime: null,
        updateTime: null,
        remark: null,
        isDel: null
      }
      this.resetForm('form')
    },
    // 表单重置
    reset2() {
      this.form2 = {
        id: null,
        name: null,
        tribunalCode: null,
        courtCode: null,
        ip: null,
        url: null,
        monitorType: null,
        brand: null
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.tribunalName = this.form.tribunalName
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset()
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset2()
      this.open = true
      this.title = '添加法庭摄像头信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset2()
      console.log(JSON.stringify(row))
      this.form2 = row
      this.open = true
      this.title = '修改法庭摄像头信息'
    },
    save() {
      if (this.form2.id != null) {
        updateTribunalCamera(this.form2).then(response => {
          this.$message({ message: '修改成功', type: 'success' })
          this.open = false
          this.getList()
        })
      } else {
        this.form2.courtCode = this.queryParams.courtCode
        addTribunalCamera(this.form2).then(response => {
          this.$message({ message: '保存成功', type: 'success' })
          this.open = false
          this.getList()
        })
      }
    },
    resetForm() {
      this.queryParams.caseName = ''
      this.queryParams.ktdd = ''
      this.queryParams.clerk = ''
      this.queryParams.judge = ''
      this.queryParams.beginTime = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.btn{
  width: 10px;
  height: 10px;
  background-image: url("../../assets/imgs/u749.png");
}
::v-deep .el-input__inner {
  height: 32px;
}
</style>
